<template>
  <div class="order" id="transition">
      <Order-Header title="我的订单"></Order-Header>
        <div class="orderMain">
            <div  class="order-box">
                <p  v-for="(c,index) in t" 
                @click="btn(index)" 
                >
                    <a :class="{active:index===nowIndex}">{{c.item}}</a>
                </p>
            </div>
            <div class="order-box2" >
               <div v-show="nowIndex===0">
                     <div v-for="(list,index) in ordersAll" :key="index" class="orders">
                        <div class="_order">
                            <p class="left">
                                <i class="iconfont icon-qijiandian"></i>
                                vivo官方旗舰店
                            </p>    
                            <p class="right" v-show="list.order_status==0">待支付</p>
							<p class="right" v-show="list.order_status==1">待收货</p>
							<p class="right" v-show="list.order_status==2">待评价</p>
							<p class="right" v-show="list.order_status==2">已完成</p>
                        </div>
                        <div class="order" >
                            <img :src="list.p_image_path">
                         
                            <div class="order-div">
                                <h3>{{list.product_class_name}}</h3>
                                <!-- <p class="order-div-color">颜色:黑</p> -->
                                <p class="order-div-price">￥{{list.price}}</p>
                            </div>
                            <div class="order-div-2">
                                × {{list.value}}
                            </div>
                        </div>
                        <div class="order-2">
                            <div class="order-2-box">
                                <p class="order-2-zero">共计<span>{{list.value}}</span>件商品</p>
                                <p class="order-2-one">总计：<span>￥{{list.price}}</span></p>
                                <p class="order-2-two">(含运费：¥0.00优惠：¥0.00)</p>
                            </div>
                        </div>
                        <div class="order-3">
                             <a @click.stop="odetails(list)">查看详情</a>
                            <a @click.stop="odefault(index)">订单删除</a>
                        </div>
                    </div>
               </div>
               
               <div  v-show="nowIndex===1">
                   <div v-for="(list,index) in ordersPay" :key="index" class="orders">
                       <div class="_order">
                           <p class="left">
                               <i class="iconfont icon-qijiandian"></i>
                               vivo官方旗舰店
                           </p>    
                        <p class="right" v-show="list.order_status==0">待支付</p>
                   		<p class="right" v-show="list.order_status==1">待收货</p>
                   		<p class="right" v-show="list.order_status==2">待评价</p>
                   		<p class="right" v-show="list.order_status==2">已完成</p>
                       </div>
                       <div class="order" >
                           <img :src="list.p_image_path">
                        
                           <div class="order-div">
                               <h3>{{list.product_class_name}}</h3>
                               <!-- <p class="order-div-color">颜色:黑</p> -->
                               <p class="order-div-price">￥{{list.price}}</p>
                           </div>
                           <div class="order-div-2">
                               × {{list.value}}
                           </div>
                       </div>
                       <div class="order-2">
                           <div class="order-2-box">
                               <p class="order-2-zero">共计<span>{{list.value}}</span>件商品</p>
                               <p class="order-2-one">总计：<span>￥{{list.price}}</span></p>
                               <p class="order-2-two">(含运费：¥0.00优惠：¥0.00)</p>
                           </div>
                       </div>
                       <div class="order-3">
                            <a @click.stop="odetails(list)">查看详情</a>
                           <a @click.stop="odefault(index)">订单删除</a>
                       </div>
                   </div>
               </div>
			   <div  v-show="nowIndex===2">
			       <div v-for="(list,index) in ordersReceipt" :key="index" class="orders">
			               <div class="_order">
			                   <p class="left">
			                       <i class="iconfont icon-qijiandian"></i>
			                       vivo官方旗舰店
			                   </p>    
			                <p class="right" v-show="list.order_status==0">待支付</p>
			           		<p class="right" v-show="list.order_status==1">待收货</p>
			           		<p class="right" v-show="list.order_status==2">待评价</p>
			           		<p class="right" v-show="list.order_status==2">已完成</p>
			               </div>
			               <div class="order" >
			                   <img :src="list.p_image_path">
			                
			                   <div class="order-div">
			                       <h3>{{list.product_class_name}}</h3>
			                       <!-- <p class="order-div-color">颜色:黑</p> -->
			                       <p class="order-div-price">￥{{list.price}}</p>
			                   </div>
			                   <div class="order-div-2">
			                       × {{list.value}}
			                   </div>
			               </div>
			               <div class="order-2">
			                   <div class="order-2-box">
			                       <p class="order-2-zero">共计<span>{{list.value}}</span>件商品</p>
			                       <p class="order-2-one">总计：<span>￥{{list.price}}</span></p>
			                       <p class="order-2-two">(含运费：¥0.00优惠：¥0.00)</p>
			                   </div>
			               </div>
			               <div class="order-3">
			                    <a @click.stop="odetails(list)">查看详情</a>
			                   <a @click.stop="odefault(index)">订单删除</a>
			               </div>
			           </div>
			       
			   </div>
			   <div  v-show="nowIndex===3">
			       <div v-for="(list,index) in ordersEvaluation" :key="index" class="orders">
			               <div class="_order">
			                   <p class="left">
			                       <i class="iconfont icon-qijiandian"></i>
			                       vivo官方旗舰店
			                   </p>    
			                <p class="right" v-show="list.order_status==0">待支付</p>
			           		<p class="right" v-show="list.order_status==1">待收货</p>
			           		<p class="right" v-show="list.order_status==2">待评价</p>
			           		<p class="right" v-show="list.order_status==3">已完成</p>
			               </div>
			               <div class="order" >
			                   <img :src="list.p_image_path">
			                
			                   <div class="order-div">
			                       <h3>{{list.product_class_name}}</h3>
			                       <!-- <p class="order-div-color">颜色:黑</p> -->
			                       <p class="order-div-price">￥{{list.price}}</p>
			                   </div>
			                   <div class="order-div-2">
			                       × {{list.value}}
			                   </div>
			               </div>
			               <div class="order-2">
			                   <div class="order-2-box">
			                       <p class="order-2-zero">共计<span>{{list.value}}</span>件商品</p>
			                       <p class="order-2-one">总计：<span>￥{{list.price}}</span></p>
			                       <p class="order-2-two">(含运费：¥0.00优惠：¥0.00)</p>
			                   </div>
			               </div>
			               <div class="order-3">
			                    <a @click.stop="odetails(list)">查看详情</a>
			                   <a @click.stop="odefault(index)">订单删除</a>
			               </div>
			           </div>
			       
			   </div>
			   <div  v-show="nowIndex===4">
			          <div v-for="(list,index) in orderFinsh" :key="index" class="orders">
			                  <div class="_order">
			                      <p class="left">
			                          <i class="iconfont icon-qijiandian"></i>
			                          vivo官方旗舰店
			                      </p>    
			                   <p class="right" v-show="list.order_status==0">待支付</p>
			              		<p class="right" v-show="list.order_status==1">待收货</p>
			              		<p class="right" v-show="list.order_status==2">待评价</p>
			              		<p class="right" v-show="list.order_status==3">已完成</p>
			                  </div>
			                  <div class="order" >
			                      <img :src="list.p_image_path">
			                   
			                      <div class="order-div">
			                          <h3>{{list.product_class_name}}</h3>
			                          <!-- <p class="order-div-color">颜色:黑</p> -->
			                          <p class="order-div-price">￥{{list.price}}</p>
			                      </div>
			                      <div class="order-div-2">
			                          × {{list.value}}
			                      </div>
			                  </div>
			                  <div class="order-2">
			                      <div class="order-2-box">
			                          <p class="order-2-zero">共计<span>{{list.value}}</span>件商品</p>
			                          <p class="order-2-one">总计：<span>￥{{list.price}}</span></p>
			                          <p class="order-2-two">(含运费：¥0.00优惠：¥0.00)</p>
			                      </div>
			                  </div>
			                  <div class="order-3">
			                       <a @click.stop="odetails(list)">查看详情</a>
			                      <a @click.stop="odefault(index)">订单删除</a>
			                  </div>
			              </div>
			          
			      </div>
			   
			</div>
        </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import OrderHeader from "../common/Header";
export default {
  name: "oerder",
  data() {
    return {
      nowIndex: 0,
      t: [
        {
          item: "全部"
        },
		{
		  item: "待支付"
		},
        {
          item: "待收货"
        },
        {
          item: "待评价"
        },
        {
          item: "已完成"
        }
      ],
	  ordersAll: [],
	  ordersPay: [],
	  ordersReceipt: [],
	  ordersEvaluation: [],
	  orderFinsh: []
    };
  },
  components: {
    OrderHeader
  },
  created() {
    this.$http.get('/api/order/get_order_info?userId=' + this.$store.state.user[0].userId + "&type=0")
    .then(res => {
		// console.log(res);
    	this.ordersAll = res.body.data;
    });
  },
  methods: {
    ...mapMutations(["odefault"]),
    btn(num) {
		this.nowIndex = num;
	    if(num == 0){
			this.$http.get('/api/order/get_order_info?userId=' + this.$store.state.user[0].userId + "&type=" + num)
			.then(res => {
				// console.log(res);
				this.ordersPay = res.body.data;
			});
	    }else if(num == 1){
			this.$http.get('/api/order/get_order_info?userId=' + this.$store.state.user[0].userId + "&type=" + num)
			.then(res => {
				// console.log(res);
				this.ordersReceipt = res.body.data;
			});
	    }else if(num == 2){
		    this.$http.get('/api/order/get_order_info?userId=' + this.$store.state.user[0].userId + "&type=" + num)
		    .then(res => {
		    	// console.log(res);
		    	this.ordersEvaluation = res.body.data;
		    });
	    }else if(num == 3){
		    this.$http.get('/api/order/get_order_info?userId=' + this.$store.state.user[0].userId + "&type=" + num)
		    .then(res => {
				// console.log(res);
				this.orderFinsh = res.body.data;
			});
	    }else if(num == 4){
			this.$http.get('/api/order/get_order_info?userId=' + this.$store.state.user[0].userId + "&type=" + num)
			.then(res => {
				// console.log(res);
				this.ordersAll = res.body.data;
			});
		}
    },
    odetails(list){
		// console.log(list);
		this.$router.push({
            path: "OrderDetails", 
            query:{
                order_number:list.order_number,
                ly:list.ly,
                listname: list.payStyle,
                value:list.value,
				orderStatus: list.order_status
            }
        })
    }
  }
};
</script>


<style lang="stylus" scoped>
.orderMain
    padding-top 1.3rem
.order-box 
    height 1rem
    background white
    position fixed
    width 100%
    border-bottom 1px solid #f0f0f0
    .active 
        color #199cfe
        border-bottom 2px solid #199cfe
    p 
        width 20%
        height 100%
        line-height 1rem
        float left
        text-align center

        a 
            width 60%
            height 100%
            font-size .36rem
            display block
            margin auto
.order-box2 
    width 100%
    margin-top 1rem
.orders
    margin-top 10px
    ._order
        width 100%
        height 1.3rem
        line-height 1.3rem
        background #ffffff
        .left
            float left
            color #666
            margin-left .5rem 
            font-size .35rem
            i 
                font-size .4rem
                color #666
        .right
            float right
            color rgb(0, 172, 255)
            margin-right .3rem
            font-size .35rem
    .order 
        width 100%
        height 3rem
        background white
        border-bottom 1px solid #f0f0f0
        border-top 1px solid #f0f0f0
        img 
            float left
            margin .3rem
            height 2.5rem
        .order-div 
            width 4rem
            margin .3rem
            line-height .7rem
            float left
            h3
                font-size 0.36rem
            .order-div-price
                color red
                font-size .4rem
        .order-div-2 
            display inline-block
            float right
            margin .3rem .6rem
            font-size .4rem
    .order-2 
        width 100%
        height 1.7rem
        background white
        .order-2-box 
            width 50%
            float right
            text-align right
            margin .2rem .4rem
            .order-2-zero
                float left  
                font-size .35rem
                margin-left .5rem
                span 
                    color red
            .order-2-one 
                font-size .35rem
                span 
                    color red
            .order-2-two
                color #666
                padding-top .2rem
                font-size .35rem
    .order-3
        width 100%
        height 1.1rem
        background white
        a
            width 2.8rem
            height .7rem
            line-height .7rem
            border 1px solid red
            border-radius 3px
            text-align center
            display block
            float right
            margin-right .3rem
            margin-top .1rem
            border 1px solid #dcdcdc
            font-size .3rem
    
	a {
		text-decoration: none
	}
	
	a:focus,
	a:hover {
		text-decoration: none
	}		
</style>

